<template>
  <div id="" class="houseList">
    <router-link class="houseDiv"
    :to="{ path: '/landlordHouseDetail', query: { houseId: houseInfo.houseId,lat:houseInfo.lat,lng:houseInfo.lng}}">
    <span class="houseSlider" v-if="houseInfo.rentType==1">
      <img :src="houseInfo.housePic" alt="" class="houseImg">
      <span class="houseState" v-if="houseInfo.auditState==1">待审核</span>
      <span class="houseState" v-else-if="houseInfo.auditState==2">
        <em v-if="houseInfo.state==1">待出租</em>
        <em v-else>已出租</em>
      </span>
      <span class="houseState" v-else-if="houseInfo.auditState==4">审核未通过</span>
    </span>
    <span class="houseSlider" v-else>
      <img :src="houseInfo.housePic" alt="" class="houseImg">
      <span class="houseState" v-if="houseInfo.auditState==1">待发布</span><!-- 待审核 -->
      <span class="houseState" v-else-if="houseInfo.auditState==2">已发布</span><!-- 审核通过 -->
      <span class="houseState" v-else-if="houseInfo.auditState==4">审核未通过</span><!-- 审核通过 -->
    </span>

    <div class="houseCon">
      <span class="title">{{houseInfo.title}}</span>
      <p class="houseAddr">
        <img src="@/assets/images/addr@2x.png" alt="" width="10">
        {{houseInfo.address}}
      </p>
      <div class="keywords mt10">
        <span v-for="item in houseInfo.houseTagList" :key="item.key">{{item.tag}}</span>
      </div>
      <span class="title" v-if="houseInfo.rentType==1">&yen;{{(houseInfo.rentMoney/100).toFixed(2)}}元/月</span>
      <span class="title" v-else>&yen;{{(houseInfo.rentDayMoney/100).toFixed(2)}}元/晚</span>
    </div>
    </router-link>
  </div>
</template>
<script>
// 长租：待审核，待出租，已出租
// 短租：待发布，已发布
export default {
  name: "",
  props: ['houseInfo'],
  data: () => ({

  }),
  mounted() {
    //do something after mounting vue instance
    console.log(this.houseInfo);
  }
}
</script>
<style lang="scss" scoped>
.houseSlider{
  position: relative;
  .houseState{
    position: absolute;
    bottom: 0;
    height: 30px;
    line-height: 30px;
    width: 100%;
    text-align: center;
    z-index: 3;
    background: rgba(0,0,0,0.6);
    color: white;
  }
}
.houseList{
  padding: 10px;
  margin-bottom: 10px;
}
.houseDiv{
  @include flex;
  padding-bottom: 10px;
  border-bottom: 1px solid $borderColor;
  margin-bottom: 10px;
  .houseImg{
    border-radius: 4px;
    width: 100px;
    height: 80px;
  }
  .houseCon{
    margin-left: 10px;
  }
  .title{
    font-size: 16px;
    font-weight: 550;
  }
  .houseAddr{
    font-size: 10px;
    margin: 4px 0;
  }

}
.keywords{
  span{
    margin-right: 6px;
    margin-bottom: 4px;
    display: inline-block;
    background: #eef0f4;
    color: #8996a2;
    border-radius: 4px;
    padding:2px 6px;
    font-size: 10px;
  }
}
</style>
